<template>
  <div class="box" id="box" style=" background: #f6f6f6;">
    <van-nav-bar :title="title" fixed left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="communication_box">
      <div class="communication_box_pro"  @click="toProDetail(card.proid)">
        <img :src="card.pro_pic" alt="">
        <div class="videoDetail_pro_detail">
          <p>{{card.pro_introduce}}</p>
          <p>
            <span>{{card.clinic_name}}</span>
            <span>{{card.distance + 'km'}}</span>
          </p>
          <p>
            <span>{{'￥' + card.pro_price}}</span>
            <span>{{card.subscribe + '预约'}}</span>
          </p>
        </div>
      </div>
      <div class="communication_box_chat">
        <div :class="item.message_type === 'erchant' ? 'communication_chat_erchant' : 'communication_chat_user'" v-for="(item, index) in dataList.message" :key="index">
          <img :src="item.via" alt="">
          <p>
            <span v-if="item.flag">
              <h1 v-for="(itm, idx) of item.merchant_message" :key="idx" @click.once="huida(itm.name)">
                {{itm.name}}
              </h1>
            </span>
            <span v-else>{{item.merchant_message}}</span>
            <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" v-if="item.star" @change="onChange"/>
          </p>
        </div>
      </div>
    </div>
     <div  style="position:fixed;bottom:0;">
       <div class="communication_need">
      <p>我想</p>
      <span @click="question">诊所的具体位置在哪里呢</span>
      <span @click="question">怎么预约呢</span>
      <span @click="question">结束</span>
    </div>
    <div v-if="yuyinShowBool" class="communication_footer">
      <span @click="toJianpan">
        <img src="@/assets/images/yuyin.png" alt="">
      </span>
      <input type="text" :value="communicationText" placeholder="请输入" @change="changeCommunicationText">
      <span @click="qita()">
        <img src="@/assets/images/qita.png" alt="">
      </span>
    </div>
    <div v-else class="communication_footer">
      <span @click="toYuyin">
        <img src="@/assets/images/jianpan.png" alt="">
      </span>
      <button>按住说话</button>
      <span @click="qita()">
        <img src="@/assets/images/qita.png" alt="">
      </span>
    </div>
    <div v-if="qitaFlag" class="other">
       <ul class="otherimg">
         <li>
           <img src="@/assets/images/paizhao.png" alt=""/>
           <p>拍照</p>
         </li>
         <li>
           <img src="@/assets/images/xiangce.png" alt=""/>
           <p>图片</p>
         </li>
       </ul>
    </div>
     </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Divider, Rate } from 'vant'
import { getProductById } from '@/api'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Divider)
Vue.use(Rate)
export default {
  data () {
    return {
      arr1: [],
      arr: [],
      value: 2.5,
      people: '',
      address: '',
      qitaFlag: false,
      card: [],
      proid: '',
      title: '',
      communicationText: '',
      yuyinShowBool: true,
      dataList: {
        id: '',
        title: '',
        message: [
          {
            message_type: 'erchant',
            via: '',
            merchant_message: '您好亲爱的，有什么可以帮助你的呢'
          }
        ]
      }
    }
  },
  mounted () {
    // console.log(this.dataList)
    const servicerid = this.$route.params.servicerid
    // console.log(servicerid)
    this.proid = servicerid.split('=')[1]
    // console.log(this.proid)
    getProductById({
      proid: this.proid,
      username: localStorage.getItem('userTel_AM')
    }).then(res => {
      // console.log(res)
      if (res.data.code === '200') {
        this.card = res.data.data[0]
        this.dataList.message[0].via = this.card.pro_pic
        this.dataList.id = this.proid
        // console.log(this.card)
        this.address = this.card.clinic_address
        this.people = this.card.subscribe
        this.title = this.card.clinic_name
        this.dataList.title = this.title
      }
    })
    // this.dataList = JSON.parse(localStorage.getItem('service'))
    this.cun()
  },
  methods: {
    fd () {
      this.dataList.message.push({
        message_type: 'erchant',
        via: this.card.pro_pic,
        merchant_message: '感谢您的评价，下次再见'
      })
      this.cun()
    },
    fc () {
      if (this.communicationText === ' 是') {
        this.dataList.message.push({
          message_type: 'erchant',
          via: this.card.pro_pic,
          merchant_message: '稍等，正在为您转接'
        })
      } else if (this.communicationText === ' 否') {
        this.dataList.message.push({
          message_type: 'erchant',
          via: this.card.pro_pic,
          merchant_message: '正在为您取消'
        })
      } else if (this.communicationText === ' 已解决') {
        this.dataList.message.push({
          message_type: 'erchant',
          via: this.card.pro_pic,
          merchant_message: '请为本次服务评价星级',
          star: true
        })
        setTimeout(this.fd, 2000)
      } else if (this.communicationText === ' 未解决') {
        this.dataList.message.push({
          message_type: 'erchant',
          via: this.card.pro_pic,
          merchant_message: '感谢您的回答，我们将努力改进'
        })
      }
      this.cun()
    },
    fb () {
      this.dataList.message.push({
        message_type: 'erchant',
        via: this.card.pro_pic,
        flag: true,
        merchant_message: [
          { name: '1. 是' },
          { name: '2. 否' }
        ]
      })
      this.cun()
    },
    fa () {
      if (this.communicationText === '诊所的具体位置在哪里呢') {
        this.dataList.message.push({
          message_type: 'erchant',
          via: this.card.pro_pic,
          merchant_message: this.address
        })
      } else if (this.communicationText === '怎么预约呢') {
        this.dataList.message.push({
          message_type: 'erchant',
          via: this.card.pro_pic,
          merchant_message: '目前预约人数' + this.people + '人，我们会尽快为你安排'
        })
      } else if (this.communicationText === '结束') {
        this.dataList.message.push({
          message_type: 'erchant',
          via: this.card.pro_pic,
          flag: true,
          merchant_message: [
            { name: '你的问题是否已经解决' },
            { name: '1. 已解决' },
            { name: '2. 未解决' }
          ]
        })
      } else {
        this.dataList.message.push({
          message_type: 'erchant',
          via: this.card.pro_pic,
          merchant_message: '不太懂你说什么，是否需要转接人工？'
        })
        setTimeout(this.fb, 1000)
      }
      this.cun()
    },
    onChange (value) {
      // console.log(this.value)
    },
    huida (name) {
      this.communicationText = name.split('.')[1]
      // console.log(this.communicationText)
      this.dataList.message.push({
        message_type: 'user',
        via: 'https://m.juooo.com/static/img/logo-user.8413cbf.png',
        merchant_message: this.communicationText
      })
      setTimeout(this.fc, 1000)
    },
    question (e) {
      // console.log(e.target.innerText)
      this.communicationText = e.target.innerText
      this.dataList.message.push({
        message_type: 'user',
        via: 'https://m.juooo.com/static/img/logo-user.8413cbf.png',
        merchant_message: this.communicationText
      })
      setTimeout(this.fa, 1000)
    },
    qita () {
      this.qitaFlag = !this.qitaFlag
    },
    toProDetail (proid) {
      this.$router.push({ path: '/proDetail', query: { proid } })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    changeCommunicationText (e) {
      this.communicationText = e.target.value
      // console.log(this.communicationText)
      this.dataList.message.push({
        message_type: 'user',
        via: 'https://m.juooo.com/static/img/logo-user.8413cbf.png',
        merchant_message: this.communicationText
      })
      setTimeout(this.fa, 1000)
    },
    toJianpan () {
      this.yuyinShowBool = false
    },
    toYuyin () {
      this.yuyinShowBool = true
    },
    // 将聊天记录存在本地
    cun () {
      // if (localStorage.getItem('service') === null) {
      //   localStorage.setItem('service', JSON.stringify(this.arr))
      // } else {
      //   // 将聊天界面最后内容存于arr
      //   this.arr.splice(0, 1, {
      //     id: this.dataList.id,
      //     title: this.dataList.title,
      //     message: this.dataList.message
      //   })
      //   localStorage.setItem('service', JSON.stringify(this.arr))
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.communication_box {
  width: 100%;
  /* height: auto; */
  // min-height: 100%;
  background: #f6f6f6;
  margin-top: 0.46rem;
  // margin-bottom: 0.7rem;
  padding: 0.3rem 0.2rem;
  .communication_box_pro {
    width: 3.35rem;
    height: 1.22rem;
    padding: 0.2rem 0.15rem;
    background: #fff8f8;
    border-radius: 0.04rem;
    margin-bottom: 0.2rem;
    /* position: fixed;
    bottom: 0.85rem;
    z-index: 20; */
    box-shadow:0px 1px 4px 2px rgba(150, 150, 150, 0.2);
    img {
      float: left;
      margin-right: 0.1rem;
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 0.05rem;
    }
    .videoDetail_pro_detail {
      width: 2.15rem;
      float: left;
      p:nth-of-type(1) {
        width: 100%;
        height: 0.32rem;
        line-height: 0.16rem;
        font-size: 0.14rem;
        color: #646363;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 0.04rem;
      }
      p:nth-of-type(2) {
        width: 100%;
        height: 0.14rem;
        line-height: 0.14rem;
        font-size: 0.12rem;
        color: #787777;
        margin: 11px 0 11px 0;
        span:nth-of-type(1) {
          float: left;
          max-width: 80%;
          margin-right: 0.1rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        span:nth-of-type(2) {
          line-height: 0.14rem;
          float: right;
        }
      }
      /* p:nth-of-type(3) {
        width: 100%;
        height: 0.14rem;
        line-height: 0.14rem;
        font-size: 0.12rem;
        color: #9a9898;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-bottom: 0.04rem;
      } */
      p:nth-of-type(3) {
        width: 100%;
        height: 0.14rem;
        line-height: 0.14rem;
        span:nth-of-type(1) {
          float: left;
          color: #ff7070;
          font-size: 0.14rem;
        }
        span:nth-of-type(2) {
          float: right;
          color: #939191;
          font-size: 0.12rem;
        }
      }
    }
  }
  .communication_box_chat {
    width: 100%;
    height: 100%;
    .communication_chat_erchant {
      overflow: hidden;
      width: 100%;
      height: auto;
      margin-bottom: 0.15rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
        float: left;
        border-radius: 0.2rem;
      }
      p {
        margin-left: 0.1rem;
        float: left;
        max-width: 2.35rem;
        height: auto;
        padding: 0.1rem 0.16rem;
        text-align: left;
        background: white;
        border-radius: 0.05rem;
      }
    }
    .communication_chat_user {
      overflow: hidden;
      width: 100%;
      height: auto;
      margin-bottom: 0.15rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
        float: right;
      }
      p {
        margin-right: 0.1rem;
        float: right;
        max-width: 2.35rem;
        height: auto;
        padding: 0.1rem 0.16rem;
        text-align: right;
        background: #a2dc44;
        border-radius: 0.05rem;
      }
    }
  }
}
.communication_need {
  width: 100%;
  height: 0.2rem;
  background: #f6f6f6;
  // position: fixed;
  // bottom: 0.5rem;
  padding: 0 0.16rem;
  line-height: 0.2rem;
  text-align: center;
  font-size: 0.12rem;
  p {
    float: left;
    width: 0.3rem;
    height: 0.2rem;
  }
  span {
    float: left;
    margin-left: 0.1rem;
    border: 1px solid rgb(199, 198, 198);
    border-radius: 0.1rem;
    padding: 0 0.08rem;
    box-sizing: border-box;
    height: 0.2rem;
    line-height: 0.18rem;
    background: white;
  }
}
.communication_footer {
  width: 100%;
  height: 0.5rem;
  background: #f3f3f3;
  // position: fixed;
  // bottom: 0;
  padding: 0 0.16rem;
  button {
    width: 2.5rem;
    height: 0.4rem;
    margin: 0.05rem 0.145rem;
    border: none;
    border-radius: 0.2rem;
    text-align: center;
    font-size: 0.14rem;
    background: #F9F9F9;
    color: #bdbdbd;
  }
  input {
    width: 2.5rem;
    height: 0.4rem;
    margin: 0.05rem 0.145rem;
    border: none;
    border-radius: 0.2rem;
    padding: 0 0.1rem;
    font-size: 0.14rem;
    color: #b8b8b8;
  }
  span {
    display: inline-block;
    width: 0.32rem;
    height: 0.32rem;
    margin: 0.085rem 0;
    img {
      width: 0.32rem;
      height: 0.32rem;
    }
  }
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #464646;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #666666;
  font-weight: bold;
}
/deep/ .van-hairline--bottom::after {
  border:none;
}
/deep/.van-divider {
  border-color: #d3d3d3;
  margin:0;
}
.other {
  width: 3.75rem;
  height: 2.16rem;
  background-color: #fff;
  .otherimg {
    li {
      float: left;
      margin:.265rem 0 0 .34rem;
      img {
      width: .32rem;
      height: .32rem;
      }
      p {
        text-align: center;
        line-height: .2rem;
        font-size: .15rem;
        color: #666;
      }
    }
  }
}
</style>
